<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="60%"
    @visible-change="handleVisibleChange">
    <div>
      <a-button @click="openPdf">PDF</a-button>
      <iframe :src="srcStr" frameborder="0" id="pdfFrame" ref="pdfFrame1" width="600px" height="600px"
        :style="styleObject"></iframe>

    </div>
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent,  ref,  nextTick } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { pdfHttp } from '/@/utils/http/axios';
enum Api {
  PDFS = '/pdf',
}
export default defineComponent({
  components: { BasicDrawer },
  setup() {

    let styleObject = ref("")
    let srcStr = ref("")
    const pdfApi = (params: any = null) => pdfHttp({ url: Api.PDFS, params, responseType: 'arraybuffer', });
    let openpdf = (visible: boolean) => {
      console.log("visible", visible);
      openPdf()
    }
    function ll(){
      console.log("visible");
    }
    function handleVisibleChange() {
      nextTick(() => {ll() });
      // console.log("visible");  
      // console.log("visible",visible);  
    }
    async function openPdf() {
      const url: string = await pdfApi();
      srcStr.value = url;
      styleObject.value = "display:block"

    }


    const [register] = useDrawerInner((data) => {
      // xx.value = data.info
      // 方式1
data;
    });
    return { register, openPdf, styleObject, srcStr, openpdf, handleVisibleChange };
  },
});
</script>
